<template>
  <div class="pageWrapper">
    <common-header />
    <div class="content">
      <van-tabs sticky :offset-top="isDD ? 0 : '1.33333rem'" v-model="active" color="#1B68EB" title-inactive-color="#CCCCCC" title-active-color="#1F1F1F" :line-width="58" :line-height="2">
        <van-tab v-for="(item, index) in tabs" :key="index" :title="item.name">
          <appraisal-list :finish="finish" ref="appraisalList" :group="item" :appraisalData="appraisalData" @onEvaluate="onEvaluate" />
        </van-tab>
      </van-tabs>
    </div>
    <directPopup :showPopup.sync="showDirect" :scoreList="scoreList" :appraisalData="appraisalData" :user="current" @onSuccess="onSuccess" />
    <multidimensionalPopup :showPopup.sync="showMultidimensional" :user="current" :appraisalData="appraisalData" :multData="multData" @onSuccess="onSuccess" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import appraisalList from "../components/appraisal-list.vue";
import directPopup from "../components/directPopup.vue";
import multidimensionalPopup from "../components/multidimensionalPopup.vue";
import { appraisalGroupList, getAppraisalType } from "@/api/appraisalPeriod";
export default {
  components: {
    appraisalList,
    directPopup,
    multidimensionalPopup
  },
  data() {
    return {
      active: 0,
      tabs: [],
      appraisalData: {},
      showDirect: false,
      showMultidimensional: false,
      current: {},
      appraisalType: 2,
      multData: {},
      scoreList: [],
      finish: false
    };
  },
  computed: {
    ...mapState({
      isDD: state => state.user.is_dd
    })
  },
  created() {
    this.finish = this.$route.query.finished == "1";
    this.appraisalData = JSON.parse(sessionStorage.getItem("appraisalData"));
    appraisalGroupList({ appraisalId: this.$route.query.id }).then(res => {
      this.tabs = res.data;
    });
    getAppraisalType({ appraisalId: this.$route.query.id }).then(res => {
      this.appraisalType = res.data.appraisalType;
      if (this.appraisalType == 1) {
        this.scoreList = res.data.appraisalDirectScoreList || [];
      } else {
        this.multData = {
          typeList: res.data.appraisalDimensionalityTypeList,
          scoreList: res.data.appraisalDimensionalityScoreList
        };
      }
    });
  },
  methods: {
    onEvaluate(item) {
      this.current = {
        ...item,
        appraisalId: this.tabs[this.active].appraisalId,
        appraisalType: this.appraisalType,
        groupId: this.tabs[this.active].id
      };
      if (this.appraisalType == 1) {
        this.showDirect = true;
      } else {
        this.showMultidimensional = true;
      }
    },
    onSuccess() {
      this.$refs["appraisalList"].forEach(ref => {
        ref.onRefresh();
      });
    }
  }
};
</script>

<style scoped lang="scss"></style>
